<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <title>Go shopping</title>
</head>
<body>

<div class="container inside-box">
    <div class="row">

        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li>
                    <button class="btn btn-default" type="submit" id="breakfast">早</button>
                </li>
                <li>
                    <button class="btn btn-default" type="submit" id="lunch">中</button>
                </li>
                <li>
                    <button class="btn btn-default" type="submit" id="dinner">晚</button>
                </li>
            </ul>
        </div>

        <div class="col-md-6" id="info">
            <!--<div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="./img/1.jpg">
                        <div class="caption">
                            <h3>Thumbnail label</h3>

                            <p>12</p>
                            <button class="btn btn-default" type="submit">Button</button>
                            &lt;!&ndash;<p><a href="#" class="btn btn-primary" role="button">Button</a>&ndash;&gt;
                        </div>
                    </div>
                </div>
            </div>-->
        </div>

        <div class="col-md-4">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>名字</th>
                        <th>数量</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody id="t-body">
                </tbody>
                <tr>
                    <td>Total:</td>
                    <td colspan="2" id="total">0</td>
                </tr>
            </table>
        </div>
    </div>
</div>




<script type="text/javascript">
    var result = [], hash = {};

    function createCart(name,price,ck){
        var a = document.getElementById("t-body");

        if(ck == 0){
            var tr = document.createElement("tr");
            tr.setAttribute("id",name);
            var n = document.createElement("td");
            var tempTd = document.createElement("td");
            var m = document.createElement("input");
            m.setAttribute("type","number");
            var p = document.createElement("td");
            n.innerHTML = name;
            p.innerHTML = price;
            m.setAttribute("value","1");
            a.appendChild(tr);
            tr.appendChild(n);
            tr.appendChild(tempTd);
            tempTd.appendChild(m);
            m.onchange = function(){
                changePrice(name,price);
            };
            tr.appendChild(p);
            total();
        }else{
            var faTr = document.getElementById('t-body').childNodes;
            for(var i=1;i<faTr.length;i++){
                if(faTr[i].childNodes[0].innerHTML == name){
                    faTr[i].childNodes[1].childNodes[0].value  = Number(faTr[i].childNodes[1].childNodes[0].value )+1;
                    faTr[i].childNodes[2].innerHTML = Number(faTr[i].childNodes[2].innerHTML ) + Number(price);
                    total();
                }
            }
        }
    }

    function changePrice(trid,price){
        var tr = document.getElementById(trid);
        var to = document.getElementById("total");
        var trinput = tr.childNodes[1].childNodes[0].value;
        if(trinput == 0){
            tr.parentNode.removeChild(tr);
        }else{
            var a = tr.childNodes[2];
            a.innerHTML = Number(trinput) * Number(price);
        }
        total();
    }

    function total(){
        var body = document.getElementById('t-body').childNodes;
        var to = document.getElementById("total");
        var t = 0;
        for(var i=1;i<body.length;i++){
           var temp =  body[i].childNodes[2].innerHTML
           t = t + Number(temp);
        }
        to.innerHTML = t;
    }


    function validateCart(){
        var fanode = document.getElementById(this.id).parentNode;
        var name = fanode.childNodes[1].innerHTML;
        var price = fanode.childNodes[2].innerHTML;
        var ck = 0;/*判断是否存在*/
        var g = [];
        g.push(name);

        /*使用hashtable的结构记录已有的元素，可以避免内层循环*/
        for (var i = 0, elem; (elem = g[i]) != null; i++) {
            if (!hash[elem]) {
                result.push(elem);
                hash[elem] = true;
                createCart(name,price,ck);
            }else{
                ck = 1;
                createCart(name,price,ck);
            }
        }

    }

    function Empty(tid) {
        var tb = document.getElementById(tid);
        if (tb) {
            tb.parentNode.removeChild(tb);
        }
    }

    function deleteRow() {
        var tr = this.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
    }

    function random(count){
        var originalArray=new Array;//原数组
        //给原数组originalArray赋值
        for (var i=0;i<count;i++){
            originalArray[i]=i+1;
        }
        return originalArray.sort(function(){
            return 0.5 - Math.random();
        });
    }

    function createTable() {
        Empty('info-row');
        var row =  document.createElement("div");
        row.className = "row";
        row.setAttribute("id","info-row");
        for (var i = 0; i < 9; i++) {
            var rad = random(100)[i];
            var num = random(10)[i];
            var outerDiv = document.createElement("div");
            outerDiv.className = "col-md-4";
            var div = document.createElement("div");
            div.className = "thumbnail";
            var cap = document.createElement("div");
            cap.className = "caption";
            var img = document.createElement("img");
            img.setAttribute("src", "./img/" + num + ".jpg");
            var h3 = document.createElement("h3");
            h3.innerHTML = "菜品" + rad;
            var p = document.createElement("p");
            p.innerHTML = 10 + i;
            var btn = document.createElement("button");
            btn.setAttribute("class","btn btn-primary");
            btn.setAttribute("id", "add" + i);
            btn.innerHTML = "Add";

            row.appendChild(outerDiv);
            outerDiv.appendChild(div);
            div.appendChild(cap);
            cap.appendChild(img);
            cap.appendChild(h3);
            cap.appendChild(p);
            cap.appendChild(btn);
        }
        document.getElementById('info').appendChild(row);

        document.getElementById("add0").onclick = validateCart;
        document.getElementById("add1").onclick = validateCart;
        document.getElementById("add2").onclick = validateCart;
        document.getElementById("add3").onclick = validateCart;
        document.getElementById("add4").onclick = validateCart;
        document.getElementById("add5").onclick = validateCart;
        document.getElementById("add6").onclick = validateCart;
        document.getElementById("add7").onclick = validateCart;
        document.getElementById("add8").onclick = validateCart;
    }


    window.onload = function () {
        createTable();
        breakfast.onclick = createTable;
        lunch.onclick = createTable;
        dinner.onclick = createTable;
    }


</script>
</body>
</html>